import React, { memo } from "react"
import type { ReactNode } from "react"
import SectionHeaderV1 from "@/components/SectionHeaderV1"
import { useAppSelector } from "@/store"
import { shallowEqual } from "react-redux"
import RankItem from "./RankItem"
import "./index.less"
interface Iprops {
	children?: ReactNode
}
const Ranking: React.FC<Iprops> = () => {
	const { rankings } = useAppSelector(
		(state) => ({
			rankings: state.recommend.rankings,
		}),
		shallowEqual,
	)
	return (
		<div className="rankingContainer">
			<SectionHeaderV1 title="榜单" moreLink="/discover/ranking" />
			<div className="content">
				{rankings?.map((item) => {
					return <RankItem key={item.id} itemData={item} />
				})}
			</div>
		</div>
	)
}

export default memo(Ranking)
